<?php require_once("header.php");?>
<?php require_once("php/upload.php");?>
<?php if($photo_upload):?>
<script>
redirect("view-recipe.php?rid="+<?php echo $_POST['rid'];?>);
</script>
<?php endif;?>
<h3>Add a New Recipe</h3>

<ul class="tabs">
	<li name="details">Details</li>
    <li name="times">Times</li>
    <li name="ingredients">Ingredients</li>
    <li name="directions">Directions</li>
</ul>


	<div class="details section">
    
    <table>
    <tr>
    <td colspan=2 class="recipe-name">
    <label for="name" class="required ignore">*</label>
    <input type="text" name="name" placeholder="ex:  My Famous Chili" />
    </td>
    <tr>
    <td>
    <form id="upload" action="" method="POST" enctype="multipart/form-data">
    	<div id="photo"><img src="images/recipes/default.png" /></div>
        <input type="hidden" name="rid" />
        <input type='file' name="file" onchange="readURL(this);" accept="image/gif, image/jpeg, image/jpg, image/png" />
    </form>
    </td>
    
    <td>
    <form id="add-recipe">    
    <label for="yield" class="required">*Serving Size</label>
    <input type="number" min="1" max="100" name="yield" placeholder="ex:  4" />
    <br />
    
    <label for="tag" class="required">Tags</label>
    <input id="tag" type="text" name="tag" placeholder="ex:  Breakfast, Quick, Low Calorie" />
    <br />
    
    <label for="name">YouTube Video</label>
    <input type="text" name="link" placeholder="ex:  http://www.youtube.com/watch?v=6nTes9ZDZI8" />
    <br />
    
    <label for="privacy">*Who can view this recipe?</label>
    <select name="privacy">
    	<option value=1>Me Only</option>
        <option value=2 selected>Friends Only</option>
        <option value=3>Everyone</option>
    </select>
    <br /><br />
    
    <input class="next" type="button" onclick="next('details','times')" value="Next Step" />
    </td>
    </tr>
    </table>
    
    </div><!--details-->
    
    <div class="times section">
    <label for="name" class="required">*Prep Time</label>
    <input class="quantity" type="number" name="prep_time" min="0" />min
    <br />
    
    <label for="name" class="required">*Inactive Time</label>
    <input class="quantity" type="number" name="inactive_time" min="0" />min
    <br />
    
    <label for="name" class="required">*Cook Time</label>
    <input class="quantity" type="number" name="cook_time" min="0" />min
    <br /><br />
    
    <input class="prev" type="button" onclick="prev('times','details')" value="Prev Step" />
    <input class="next" type="button" onclick="next('times','ingredients')" value="Next Step" />
    </div><!--times-->
    
    <div class="ingredients section">
    <?php $measurements = json_decode(api("measurements/","GET",null),true);
	for($count=1; $count<=10; $count++):?>
    <span class="row <?php if($count==1): echo "first";endif;?>">
        <label class="count" for="i-<?php echo $count;?>"><?php echo $count;?></label>
        <input class="quantity" type="number" min="0" name="q-<?php echo $count;?>" />
        <select name="m-<?php echo $count;?>">
            <?php foreach($measurements as $m):
			echo "<option value='".$m['name']."'>".$m['list']."</option>";
			endforeach;?>
        </select>
        <input class="ingredient" type="text" name="i-<?php echo $count;?>" />
        <input class="optional" type="checkbox" name="o-<?php echo $count;?>" checked />
        <label for="o-<?php echo $count;?>" class="optional">required</label>
        <br />
    </span><!--row-->
    <?php endfor;?>
    
    <input type="button" value="+" onclick="addIngredient()" />
    <br /><br />
    
    <input class="prev" type="button" onclick="prev('ingredients','times')" value="Prev Step" />
    <input class="next" type="button" onclick="next('ingredients','directions')" value="Next Step" />
    </div><!--ingredients-->
    
    <div class="directions section">
    
    <?php for($count=1; $count<=3; $count++):?>
    <span class="row <?php if($count==1): echo "first";endif;?>">
        <label for="d-<?php echo $count;?>"><?php echo $count;?></label>
        <textarea name="d-<?php echo $count;?>" cols="50" rows="3"></textarea>
        <br />
    </span><!--row-->
    <?php endfor;?>
    
    <input type="button" value="+" onclick="addDirection()" />
    <br /><br />
    
    <input class="prev" type="button" onclick="prev('directions','ingredients')" value="Prev Step" />
    </div><!--directions-->
    
    <input type="button" onclick="addNewRecipe()" value="Save New Recipe" />
    
    <div>
    <br /><br />
    * Required Field
    </div>
    
</form><!--add recipe-->

<script type="text/javascript" src="scripts/recipes.js?<?php echo time();?>"></script>
<script>
setTabs();
optional();
resize($(".details img"),200,200);
// tags
<?php $tags = api("tags/","GET",null);?>
var tempTags = <?php echo $tags;?>;
var tags = new Array();
for(var i=0; i<tempTags.length; i++){
	tags[i] = tempTags[i]['name'];;
}

// ingredients
<?php $ingredients = api("ingredients/","GET",null);?>
var tempIngredients = <?php echo $ingredients;?>;
var ingredients = new Array();
for(var i=0; i<tempIngredients.length; i++){
	ingredients[i] = tempIngredients[i]['name'];;
}
$(".ingredients .row:nth-child(2) input:first").attr("placeholder","#");
$(".ingredients .row:nth-child(2) input[type=text]:last").attr("placeholder","ex:  Bananas");

setAutoComplete("tag",true,tags,true);
setAutoComplete("ingredient",false,ingredients);
</script>
<?php require_once("footer.php");?>